<template>
  <view class="remark-card">
    <view class="header">
        <view class="header-icon" @click="handleClickIcon(item.userId)">
        <image :src="item.icon?item.icon:'../static/icons/my-active.png'" mode="widthFix" />
        </view>
      <view class="header-info">
        <view class="title">{{item.username}}</view>
        <view>{{item.createTime}}</view>
      </view>
    </view>
    <view class="content">
      <!-- <view class="food-photo">
      <image :src="item.photo[0]" mode="aspectFill" />
      </view>
      <view class="food-info">
        <text>名称：{{item.foodName}}</text>
        <view class="food-remark">
          <text>评分：</text>
          <uni-rate :readonly="true" size="14" v-model="item.score" />
        </view>
        <text>坐标：{{item.schoolName+item.address}}</text>
        <text>描述：{{item.description}}</text>
      </view> -->
			<view class="view_tupian_wenzi">
			<image class="image_1" :src="item.photo[0]" mode="aspectFill"/>
			<view class="view_wenzi2">
				<text class="food-name">{{item.foodName}}</text>
				<view class="food-remark">
					<uni-rate :readonly="true" size="14" v-model="item.score" />
				</view>
				<text class="food-address">坐标：{{item.schoolName+' '+item.address}}</text>
				<text class="food-description">{{item.description}}</text>
			</view>
		</view>
    </view>
    <view class="footer">
      <view @click="addLikes">
        <text v-if="item.isAdmired===0" class="like-icon icon icondianzan2"></text>
        <text v-else class="like-icon icon iconz-likeFill"></text>
        <text class="footer-num">{{item.dianZanNum}}</text>
      </view>
      <view @click="addComments">
        <text class="message-icon icon iconwei-"></text>
        <text class="footer-num">{{item.pingLunNum}}</text>
      </view>
    </view>
  </view>
</template>

<script>
import FoodCard from '@/components/FoodCard'
import {uniRate} from '@dcloudio/uni-ui'
export default {
  name: 'remark-card',
  components: {
    FoodCard, uniRate
  },
  props: [
    'item'
  ],
  methods: {
    addLikes (val) {
      this.$emit('addLikes')
    },
    addComments(val) {
      this.$emit('addComments')
		},
		handleClickIcon(userId) {
			uni.navigateTo({
				url: '/pages/mine/myRemark?remarkMasterId='+userId
			})
		}
	},
}
</script>

<style lang='scss'>
  /* 头条小程序组件内不能引入字体 */
	/* #ifdef MP-BAIDU */
	@font-face {
		font-family: uniicons;
		font-weight: normal;
		font-style: normal;
		src: url("~@/static/uni.ttf") format("truetype");
	}
	/* #endif */
  
  .remark-card {
    margin: 20rpx;
    border: 3px solid #e7e4e4;
    border-radius: 20px;
    background-color: #ffffff;
    .header {
			display: flex;
			padding: 40rpx;
			background-color: #ffffff;
			padding: 10rpx 20rpx;
			border-bottom: 1px solid #f5f5f5;
			.header-icon {
				flex-shrink: 0;
				width: 40px;
				height: 40px;                                                                                                                                                                                  
				border-radius: 20px;
				overflow: hidden;
					image {
							height: 100%;
							width: 100%;
					}
			}
			.header-info {
        display: flex;
        flex-direction: column;
        padding-left: 10px;
				font-size: 12px;
				color: #999;
				line-height: 1;
				.title {
						margin: 5px 0;
						font-size: 16px;
						color: #333;
				}
			}
    }
    .content {
      display: flex;
      justify-content: space-around;
	  	padding-top: 10px;
			.view_tupian_wenzi {
				display: flex;
				flex-direction: row;
				margin-left: 10px
			}
			.image_1 {
				width: 250rpx;
				height: 100px;
			}
			.view_wenzi2 {
				width: 400rpx;
				margin-left: 5px;
				display: flex;
				flex-direction: column;
				padding-bottom: 10px;
				text {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
          overflow: hidden;
          padding-left: 10px;
          padding-bottom: 5px;
        }
        .food-name {
          font-size: 16px;
          color: #333333;
        }
				.food-address {
          font-size: 14px;
          color: #666666;
        }
        .food-description {
          font-size: 12px;
          color: #999999;
        }
			}
      .food-photo {
        height: 120px;
        width: 30%;
        image {
          height: 100%;
          width: 100%;
        }
      }
      .food-info {
        margin-left: 10rpx;
        height: 200rpx;
        width: 70%;
        .food-remark {
          display: flex;
          flex-direction: row;
        }
        text {
          display: block;
        }
      }
    }
    .footer {
      display: flex;
      padding: 0 220rpx;
      height: 30px;
      line-height: 30px;
			justify-content: space-between;
			.like-icon {
        color: $theme-color;
			}
      .icon {
        padding-left: 20rpx;
      }
      .message-icon {
        color: $theme-color;
      }
      .footer-num {
        display: inline-block;
        padding-left: 10px;
        color: #999;
      }
    }
  }
</style>
